<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <script type="text/javascript" src='../vue/dist/vue.js'></script>
    <script type="text/javascript">
        // 全局组件
        //
        Vue.component('my-btn',{
            template: `<button>公共按钮</button>`
        });
        var MyHeader = {
            template: `<div>
                我是header组件
                <my-btn />
            </div>`
        };
        var MyFooter = {
            template: `<div>
                我是footer组件
                <my-btn />
            </div>`
        }
        // 入口组件
        var App = {
            components: {
                'my-header': MyHeader,
                'my-footer': MyFooter
            },
            template: `
                <div>
                    <my-header/>
                    <hr />
                    <my-footer/>
                    <hr />
                    <my-btn />
                </div>
            `
        }
        new Vue({
            el: '#app',
            components: {
                app: App
            },
            template: '<app/>',

        })
    </script>
</body>
</html>